<template>
  <a-form :form="form" class='loginForm' @submit="handleSubmit">
    <a-form-item :help="usernameError() || ''"
                 :validate-status="usernameError() ? 'error' : ''">
      <a-input
        v-decorator="[
					'username',
					{rules: [
						{ required: true, message: '请输入用户名称!' },
						{ max: 20, message: '长度不可超过20个字符！' }
					]}
				]"
        placeholder="请输入用户名称">
        <a-icon slot='prefix' type='user'/>
      </a-input>
    </a-form-item>
    <a-form-item :help="passwordError() || ''"
                 :validate-status="passwordError() ? 'error' : ''">
      <a-input
        v-decorator="[
					'password',
					{rules: [
						{ required: true, message: '请输入登录密码!' },
						{ max: 20, message: '长度不可超过20个字符！' }
					]}
				]"
        placeholder="请输入登录密码"
        type="password">
        <a-icon slot='prefix' type='lock'/>
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-button :disabled="hasErrors(form.getFieldsError())"
                html-type="submit"
                @keyup.enter='submit'>登录
      </a-button>
    </a-form-item>
    <a-form-item>
      <span class="sysVersion">版本V1.0.1</span>
    </a-form-item>
  </a-form>
</template>

<script>
  import {LOGIN} from '@/../static/js/apis.js'

  function hasErrors(fieldsError) {
    return Object.keys(fieldsError).some(field => fieldsError[field]);
  }

  export default {
    name: 'LoginForm',
    data() {
      return {
        hasErrors,
        form: this.$form.createForm(this),
      };
    },
    methods: {
      // Only show error after a field is touched.
      usernameError() {
        const {getFieldError, isFieldTouched} = this.form;
        return isFieldTouched('username') && getFieldError('username');
      },
      // Only show error after a field is touched.
      passwordError() {
        const {getFieldError, isFieldTouched} = this.form;
        return isFieldTouched('password') && getFieldError('password');
      },
      handleSubmit(e) {
        const self = this;
        e.preventDefault();
        self.form.validateFields((err, values) => {
          if (!err) {
            //按需引入方法，提供参数和正确数据的处理方法即可
            LOGIN(values, function (res) {
              //恢复localStorage记录初始值
              if (res.code == "200") {
                self.$store.commit('changeFirstNavSelected', "1")
                //self.$store.commit('changeSecondNavSelected', "0")
                //window.location.href= "http://192.168.1.206:8888/?ReturnUrl=" + window.location.href

                localStorage.setItem("username", res.data.username)
                localStorage.setItem("userid", res.data.userid)
                localStorage.setItem("token", res.data.token)
                localStorage.setItem("role", res.data.role)
                localStorage.setItem("permissions", res.data.permissions)
                 self.$router.push({path: '/guideMenu'})
                //  console.log(localStorage)
              } else {
                self.$message.error(res.message)
              }


            })
          } else {
            self.$message.error("请正确填写用户名密码！")
          }
        });
      }
    }
  }
</script>

<style scoped>
  .ant-form-item {
    margin-bottom: 18px;
  }

  /*添加deep后可覆盖样式，否则不生效，跟icon的slot有关*/
  /deep/ .ant-input {
    border: none !important;
    border-bottom: 1px solid #EFBC76 !important;
    border-radius: 0px;
  }

  /deep/ .ant-input:focus {
    border-color: #faad14 !important;
    border-width: 2px !important;
    box-shadow: 0px 0px 1px #eaaa1a inset;
  }

  /deep/ .ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled) {
    border-color: #faad14 !important;
    border-width: 2px !important;
    box-shadow: 0px 0px 1px #eaaa1a inset;
  }

  /deep/ .ant-input:not(:first-child) {
    padding-left: 50px;
  }

  .ant-form-item .ant-input-prefix i {
    color: rgb(239, 188, 118);
    font-size: 18px;;
  }

  /*button style*/
  .ant-btn {
    width: 100%;
    background-color: #EFBC76;
    border-color: #EFBC76;
    font-weight: 700;
    color: black;
  }

  .ant-btn:hover,
  .ant-btn:focus {
    box-shadow: 0px 2px 3px #7d613e inset
  }

  .ant-btn[disabled]:hover {
    box-shadow: none;
    background-color: #e6c89f;
  }

  .sysVersion {
    width: 100%;
    text-align: center;
    display: block;
    color: #ccc;
    font-size: 12px;
  }
</style>
